// 网络状态
<template>
  <div class="my_loading" v-loading="loading">
    <el-row>
      <el-col :sm="24" :md="24" :lg="24" :xl="24">
        <div class="big_box2">
          <!-- <div class="network_title">
          <h2 class="line">网络优先级配置</h2>
          <span>LAN、IoT网络优先级设置</span>
          <el-radio-group v-model="radioVal">
            <el-radio :label="1">LAN</el-radio>
            <el-radio :label="2">同级</el-radio>
          </el-radio-group>
          </div>-->
          <div class="item_box">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="145px" size="small">
              <el-row>
                <el-col class="item-title line" :sm="2" :md="2" :lg="2" :xl="2">LAN配置</el-col>
                <el-col :sm="11" :md="11" :lg="11" :xl="11" class="item-box-l">
                  <el-form-item label="本地IP" prop="R_00100003">
                    <el-input :disabled="LanLoad" placeholder="本地IP" v-model.trim="ruleForm.R_00100003"></el-input>
                  </el-form-item>
                  <el-form-item label="子网掩码" prop="R_00100004">
                    <el-input :disabled="LanLoad" placeholder="子网掩码" v-model.trim="ruleForm.R_00100004"></el-input>
                  </el-form-item>
                  <el-form-item label="网关" prop="R_00100005">
                    <el-input :disabled="LanLoad" placeholder="网关" v-model.trim="ruleForm.R_00100005"></el-input>
                  </el-form-item>
                  <el-form-item label="服务端IP" prop="R_00100006">
                    <!-- <el-input disabled placeholder="服务端IP" v-model="ruleForm.R_00100006"></el-input> -->
                    <el-input :disabled="LanLoad" placeholder="服务端IP" v-model.trim="ruleForm.R_00100006"></el-input>
                  </el-form-item>
                  <el-form-item label="服务端端口" prop="R_00100008">
                    <el-input :disabled="LanLoad" placeholder="请输入端口" v-model.trim="ruleForm.R_00100008"></el-input>
                    <!-- <el-input disabled placeholder="请输入端口" v-model="ruleForm.R_00100008"></el-input> -->
                  </el-form-item>
                  <!-- <el-form-item class="item-button">
                    <el-button type="primary" class="btns_sbmit" disabled>连接测试</el-button>
                  </el-form-item> -->
                </el-col>
                <el-col :sm="11" :md="11" :lg="11" :xl="11" class="item-box-r">
                  <!-- <el-form-item label="通信使能">
                    <el-switch :value="ruleForm.R_00100009" :active-icon-class="icon_00100009" :active-value="1" :inactive-value="0" @change="lanToggle" :disabled="d_00100009"></el-switch>
                  </el-form-item> -->
                  <el-form-item label="定时发送数据时间(秒)" class="inputNumber">
                    <!-- :disabled="LanLoad" -->
                    <el-input-number
                      disabled
                      class="electricity"
                      v-model="ruleForm.R_00100001"
                      controls-position="right"
                      :min="3"
                      placeholder="请输入时间"
                      size="small"
                      @change="changeIputNum('R_00100001')"
                    ></el-input-number>
                    <!-- <el-tooltip content="最小不低于3秒" effect="dark" placement="top-start">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#el-icon-myquestion-mark" />
                      </svg>
                    </el-tooltip> -->
                  </el-form-item>
                  <el-form-item label="网络心跳包时间(秒)" class="inputNumber">
                    <!-- :disabled="LanLoad" -->
                    <el-input-number
                      disabled
                      class="electricity"
                      v-model="ruleForm.R_00100002"
                      controls-position="right"
                      :min="3"
                      :max="60"
                      size="small"
                      @change="changeIputNum('R_00100002')"
                    ></el-input-number>
                    <!-- <el-tooltip content="范围:3~60秒" effect="dark" placement="top-start">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#el-icon-myquestion-mark" />
                      </svg>
                    </el-tooltip> -->
                  </el-form-item>
                  <div class="btns_box">
                    <el-button type="primary" :loading="LanLoad" @click="LANSubmit" :disabled="flag">提交</el-button>
                    <el-button type="primary" :loading="ljsxLANLoad" @click="ljsxSubmit('LAN')" :disabled="flag">立即生效</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="item_box">
            <el-form :model="lotForm" :rules="rules2" ref="ruleForm2" label-width="145px" size="small">
              <el-row>
                <el-col class="item-title line" :sm="2" :md="2" :lg="2" :xl="2">loT配置</el-col>
                <el-col :sm="11" :md="11" :lg="11" :xl="11" class="item-box-l">
                  <el-form-item label="服务端IP" prop="R_000f0003">
                    <el-input placeholder="服务端IP" v-model.trim="lotForm.R_000f0003"></el-input>
                    <!-- <el-input disabled placeholder="服务端IP" v-model="lotForm.R_000f0003"></el-input> -->
                    <!-- <el-input :disabled="LotLoad" placeholder="服务端IP" v-model="lotForm.R_000f0003"></el-input> -->
                  </el-form-item>
                  <el-form-item label="端口号" prop="R_000f0004">
                    <!-- <el-input disabled v-model="lotForm.R_000f0004" placeholder="请输入端口"></el-input> -->
                    <el-input v-model.trim="lotForm.R_000f0004" placeholder="请输入端口"></el-input>
                  </el-form-item>
                  <el-form-item label="MQTT账号" prop="R_000f000b">
                    <el-input disabled placeholder="MQTT账号" v-model="lotForm.R_000f000b"></el-input>
                  </el-form-item>
                  <el-form-item label="MQTT密码" prop="R_000f000c">
                    <el-input disabled placeholder="MQTT密码" v-model="lotForm.R_000f000c"></el-input>
                  </el-form-item>
                  <el-form-item label="MQTT发布主题名" prop="R_000f000d">
                    <el-input placeholder="MQTT发布主题名" v-model="lotForm.R_000f000d" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="MQTT上下电发布主题名" prop="R_000f000e">
                    <el-input placeholder="上下电发布主题名" v-model="lotForm.R_000f000e" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="MQTT开关门发布主题名" prop="R_000f000f">
                    <el-input placeholder="开关门发布主题名" v-model="lotForm.R_000f000f" disabled></el-input>
                  </el-form-item>
                  <!-- <el-form-item class="item-button">
                    <el-button type="primary" class="btns_sbmit" disabled>连接测试</el-button>
                  </el-form-item> -->
                </el-col>
                <el-col :sm="11" :md="11" :lg="11" :xl="11" class="item-box-r">
                  <el-form-item label="IoT使能">
                    <el-switch :value="lotForm.R_000f0005" :active-icon-class="icon_000f0005" :active-value="1" :inactive-value="0" @change="lotToggle" :disabled="true"></el-switch>
                    <!-- <el-switch :value="lotForm.R_000f0005" :active-icon-class="icon_000f0005" :active-value="1" :inactive-value="0" @change="lotToggle" :disabled="d_000f0005"></el-switch> -->
                  </el-form-item>
                  <el-form-item label="IoT通讯协议">
                    <el-select v-model="lotForm.R_000f0007" placeholder="请选择" disabled>
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="读取定位信息时间(秒)" class="inputNumber">
                    <!-- :disabled="LotLoad" -->
                    <el-input-number disabled class="electricity" controls-position="right" v-model="lotForm.R_000f0009" :min="15" size="small" @change="changeIputNum('R_000f0009')"></el-input-number>
                    <!-- <el-tooltip content="最小不低于15秒" effect="dark" placement="top-start">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#el-icon-myquestion-mark" />
                      </svg>
                    </el-tooltip> -->
                  </el-form-item>
                  <el-form-item label="定时发送数据时间(秒)" class="inputNumber">
                    <!-- :disabled="LotLoad" -->
                    <el-input-number
                      disabled
                      class="electricity"
                      controls-position="right"
                      v-model="lotForm.R_000f0001"
                      :min="15"
                      :max="180"
                      placeholder="请输入时间"
                      size="small"
                      @change="changeIputNum('R_000f0001')"
                    ></el-input-number>
                    <!-- <el-tooltip content="范围:15~180秒" effect="dark" placement="top-start">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#el-icon-myquestion-mark" />
                      </svg>
                    </el-tooltip> -->
                  </el-form-item>
                  <el-form-item label="网络心跳包时间(秒)" class="inputNumber">
                    <!-- :disabled="LotLoad" -->
                    <el-input-number
                      disabled
                      class="electricity"
                      controls-position="right"
                      v-model="lotForm.R_000f0002"
                      :min="10"
                      :max="180"
                      size="small"
                      @change="changeIputNum('R_000f0002')"
                    ></el-input-number>
                    <!-- <el-tooltip content="范围:10~180秒" effect="dark" placement="top-start">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#el-icon-myquestion-mark" />
                      </svg>
                    </el-tooltip> -->
                  </el-form-item>
                  <div class="btns_box">
                    <el-button type="primary" :loading="LotLoad" :disabled="flag" @click="LOTSubmit">提交</el-button>
                    <el-button type="primary" :loading="ljsxIOTLoad" @click="ljsxSubmit('IOT')" :disabled="flag">立即生效</el-button>
                  </div>
                </el-col>
                <el-col class="first_box" :sm="7" :md="7" :lg="7" :xl="7" :offset="1"></el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 修改提示窗 -->
    <el-dialog title="提示" :visible.sync="dialogStstusVisible" width="640px" @close="parentEvent">
      <statusPage :listStatus="listStatus" @child-event="closeDialog" />
    </el-dialog>
    <el-dialog title="提示" :close-on-click-modal="false" :visible.sync="LANload" width="600px" @close="parentEventLAN">
      <div style="height: 300px; padding: 20px">
        <el-steps direction="vertical" :active="stepActive">
          <el-step title="唤醒IoT网络" :icon="stepActive === 1 ? 'el-icon-loading' : ''"></el-step>
          <el-step title="关闭LAN网络" :icon="stepActive === 2 ? 'el-icon-loading' : ''"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ziC } from '@/utils/allUrl.js'
import { getUUID, isJSON, errorTips, overTimeTips, unique, listTips, intervalTime, notChanges, send, sendPing, newSocket } from '@/utils/websocket'
import enumData from '@/utils/enum.json' // 枚举
import statusPage from '@/components/mainboard/listStatusTip'
const ipReg = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
export default {
  data: function () {
    return {
      stepActive: 0,
      LANload: false,
      socket: '',
      setIntervalWesocketPush: null,
      dialogStstusVisible: false, // 修改弹出窗
      listStatus: [], // 修改项数组
      flag: true,
      ruleForm: {
        R_00100003: '', // 本地ip
        R_00100004: '', // 子网掩码
        R_00100005: '', // 网关
        R_00100006: '', // ip 服务器地址
        R_00100008: '', // 服务端端口
        R_00100009: 0, // 通信使能
        R_00100001: '', // 定时发送数据时间
        R_00100002: '', // 网络心跳包时间
      },
      lotForm: {
        R_000f0003: '', // 服务端ip
        R_000f0004: '', // 端口号
        R_000f000b: '', // MQTT用户名称
        R_000f000c: '', // MQTT用户密码
        R_000f000d: '', // MQTT发布主题名
        R_000f000e: '', // MQTT发布主题名(上下电)
        R_000f000f: '', // MQTT发布主题名(开关门)
        R_000f0005: 0, // lot 使能
        R_000f0007: 1, // 通讯协议
        R_000f0009: '', // 定时读取定位信息的时间
        R_000f0001: '', // 定时发送数据时间
        R_000f0002: '', // 网络心跳包时间
      },
      rules: {
        R_00100003: [
          { required: true, message: '请输入本地ip地址', trigger: 'blur' },
          { pattern: ipReg, message: '请输入正确的IP地址', trigger: 'blur' },
        ],
        R_00100004: [
          { required: true, message: '请输入子网掩码', trigger: 'blur' },
          { pattern: ipReg, message: '请输入正确的子网掩码', trigger: 'blur' },
          // {
          //   pattern: /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/,
          //   message: '请输入正确的子网掩码',
          //   trigger: 'blur',
          // },
        ],
        R_00100005: [
          { required: true, message: '请输入网关', trigger: 'blur' },
          { pattern: ipReg, message: '请输入正确网关', trigger: 'blur' },
          // { pattern: /^192\.168(\.(\d|([1-9]\d)|(1\d{2})|(2[0-4]\d)|(25[0-5]))){2}$/, message: '请输入正确网关', trigger: 'blur' },
        ],
        R_00100006: [{ required: true, message: '请输入服务端IP', trigger: 'blur' }],
        R_00100008: [
          { required: true, message: '请输入端口', trigger: 'blur' },
          { pattern: /^[1-9]$|(^[1-9][0-9]$)|(^[1-9][0-9][0-9]$)|(^[1-9][0-9][0-9][0-9]$)|(^[1-6][0-5][0-5][0-3][0-5]$)/, message: '请输入正确端口', trigger: 'blur' },
        ],
      },
      rules2: {
        R_000f0003: [{ required: true, message: '请输入服务端ip地址', trigger: 'blur' }],
        R_000f0004: [
          { required: true, message: '请输入端口', trigger: 'blur' },
          { pattern: /^[1-9]$|(^[1-9][0-9]$)|(^[1-9][0-9][0-9]$)|(^[1-9][0-9][0-9][0-9]$)|(^[1-6][0-5][0-5][0-3][0-5]$)/, message: '请输入正确端口', trigger: 'blur' },
        ],
        R_000f000b: [
          { required: true, message: '请输入MQTT账号', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 12 个字符之间', trigger: 'blur' },
        ],
        R_000f000c: [
          { required: true, message: '请输入MQTT密码', trigger: 'blur' },
          { min: 6, max: 30, message: '长度在 6 到 12 个字符之间', trigger: 'blur' },
        ],
      },
      radioVal: 1,
      options: [{ value: 1, label: 'MQTT' }], // LOT通信协议数据
      d_00100009: false, // 通信使能
      d_000f0005: false, // IoT使能开关
      icon_00100009: '', // 通信使能加载样式
      icon_000f0005: '', // IoT使能开关加载样式
      LanLoad: false, // LAN提交按钮样式
      LotLoad: false, // LOT提交按钮样式
      ruleFormCopy: {}, // lan  copy
      lotFormCopy: {}, //  lot  copy
      ruleFormSelected: [], // lan 更改存储的值
      lotFormSelected: [], // lot
      messageLoad: false,
      username: '',
      timerNum: 0,
      loading: true,
      ljsxLANLoad: false,
      ljsxIOTLoad: false,
      ljsxTimer: null,
      LOTTimer: null,
      LANTimer: null,
      firstFlag: true,
      enableTimeOut: null,
      R_00100001: false,
      R_00100002: false,
      R_000f0009: false,
      R_000f0001: false,
      R_000f0002: false,
    }
  },
  components: { statusPage },
  watch: {
    // 判断lot 使能开关是否开启
    'lotForm.R_000f0005': {
      immediate: true,
      handler: function (newVal, oldVal) {
        this.isBtnFlag(newVal, this.ruleForm.R_00100009, true, false)
      },
    },
    // 判断通信使能开关是否开启
    'ruleForm.R_00100009': {
      immediate: true,
      handler: function (newVal, oldVal) {
        this.isBtnFlag(newVal, this.lotForm.R_000f0005, false, true)
      },
    },
    ruleForm: {
      // LAN 提交数据监测
      deep: true,
      immediate: false,
      handler: function (newVal, oldVal) {
        if (Object.keys(this.ruleFormCopy).length === 0) {
          return
        }
        for (const i in newVal) {
          if (newVal[i] !== this.ruleFormCopy[i]) {
            if (i === 'R_00100009') {
              continue
            }
            // 定时发送数据数据时间
            if (i === 'R_00100001') {
              if (this.R_00100001) {
                this.ruleFormSelected.push(i)
              }
            } else if (i === 'R_00100002') {
              // 网络心跳包
              if (this.R_00100002) {
                this.ruleFormSelected.push(i)
              }
            } else {
              this.ruleFormSelected.push(i)
            }
          }
        }
      },
    },
    lotForm: {
      // loT提交数据监测
      deep: true,
      immediate: false,
      handler: function (newVal, oldVal) {
        if (Object.keys(this.lotFormCopy).length === 0) {
          return
        }
        for (const i in newVal) {
          if (newVal[i] !== this.lotFormCopy[i]) {
            if (i === 'R_000f0005') {
              continue
            }
            if (i === 'R_000f0009') {
              if (this.R_000f0009) {
                this.lotFormSelected.push(i)
              }
            } else if (i === 'R_000f0001') {
              // 网络心跳包
              if (this.R_000f0001) {
                this.lotFormSelected.push(i)
              }
            } else if (i === 'R_000f0002') {
              // 网络心跳包
              if (this.R_000f0002) {
                this.lotFormSelected.push(i)
              }
            } else {
              this.lotFormSelected.push(i)
            }
          }
        }
      },
    },
  },
  created: function () {
    this.UUID = getUUID(32, 16)
    this.username = localStorage.getItem('userName') // 用户登录名
    this.createSocket()
    if (this.loading) {
      this.timer = setTimeout(() => {
        this.loading = false
        this.$message.error(overTimeTips)
      }, intervalTime)
    } else {
      clearTimeout(this.timer)
    }
  },
  methods: {
    parentEventLAN() {},
    // 建立websocket连接
    createSocket() {
      // // 在main.js或需要使用的地方引入并建立连接
      this.socket && this.socket.close()
      if (!this.socket) {
        console.log('建立websocket连接')
        this.socket = new WebSocket(newSocket(this.username, this.UUID))
        this.socket.onopen = this.open
        this.socket.onmessage = this.getMessage
        this.socket.onerror = this.onerror
        this.socket.onclose = this.onclose
      } else {
        console.log('websocket已连接')
      }
    },
    open() {
      this.getFirstId() // 第一包数据
      sendPing(this) // 发送心跳
    },
    // send第一次数据
    getFirstId() {
      const list = []
      this.getFor(this.ruleForm, list)
      this.getFor(this.lotForm, list)
      send(this, '01', list)
    },
    getMessage(msg) {
      // LAN网络切换成IOT网络第二步
      // console.log('--------', msg.data)
      if (msg.data === `HOST_LOGIN_IN_${localStorage.getItem('SN')}`) {
        console.log('第二步:', msg.data)
        this.stepActive = 2 // 第二步
        this.LANload = true
      }
      // LAN网络切换成IOT网络第二步
      if (msg.data === 'LAN_SUCCESS') {
        console.log('第三步:', msg.data)
        this.stepActive = 3 // 第三步
        this.LANload = true
        this.ruleForm.R_00100009 = 0
      }
      // IoT网络切换成LAN网络
      if (msg.data === `LAN_LOGIN_SUCCESS_${localStorage.getItem('SN')}`) {
        this.$message.success('配置修改成功')
        this.LanLoad = false
        this.flag = false
      }
      switch (isJSON(msg.data)) {
        case false: // 主板实时数据
          break
        case true:
          // 接收到消息回复ok
          var SN = localStorage.getItem('SN')
          this.socket.send(`TILL${SN}OK`)
          if (typeof JSON.parse(msg.data) === 'object' && 'obj') {
            const res = JSON.parse(msg.data)
            switch (Number(res.doing)) {
              case 1: // 读取数据
                console.log('网络配置-01', res, new Date())
                // 状态码错误提示
                if (res.host_status !== '0000') {
                  this.loading = false // 取消数据加载中样式
                  clearTimeout(this.timer)
                  // errorTips(res.host_status)
                  errorTips(res.host_status, res.tips)
                  this.firstFlag = false
                  return
                }
                // // 接收到消息回复ok
                // var SN = localStorage.getItem('SN')
                // this.socket.send(`TILL${SN}OK`)
                if (res.list.length > 0) {
                  for (let i = 0; i < res.list.length; i++) {
                    var id = res.list[i].command_id.toLowerCase()
                    var content = res.list[i].value
                    for (const i in this.ruleForm) {
                      // lan
                      if (i === 'R_' + id) {
                        if (i === 'R_00100009') {
                          // 通信使能
                          content = Number(content)
                        }
                        if (i === 'R_00100001' || i === 'R_00100002') {
                          this.ruleForm[i] = content.replace(/[^\d.]/g, '')
                        } else {
                          this.ruleForm[i] = content
                        }
                      }
                    }
                    for (const i in this.lotForm) {
                      // lot
                      if (i === 'R_' + id) {
                        if (i === 'R_000f0007') {
                          // 通信协议选择
                          content = 1
                        }
                        if (i === 'R_000f0005') {
                          // lot 使能
                          content = Number(content)
                        }
                        if (i === 'R_000f0009' || i === 'R_000f0001' || i === 'R_000f0002') {
                          this.lotForm[i] = content.replace(/[^\d.]/g, '')
                        } else {
                          this.lotForm[i] = content
                        }
                      }
                    }
                    // 拷贝数据 信息配置参数 系统配置参数
                    this.ruleFormCopy = JSON.parse(JSON.stringify(this.ruleForm))
                    this.lotFormCopy = JSON.parse(JSON.stringify(this.lotForm))
                    this.loading = false // 取消数据加载中样式
                    // this.firstFlag = false
                    // console.log('------', this.firstFlag)
                    setTimeout(() => {
                      this.ruleFormSelected = []
                      this.lotFormSelected = []
                      this.flag = false
                    }, 1000)
                  }
                }
                break
              case 2: // 写入数据
                if (res.host_status !== '0000') {
                  clearTimeout(this.timer)
                  errorTips(res.host_status, res.tips)
                  // 设置为初始状态
                  this.icon_00100009 = '' // lan开关加载样式
                  this.icon_000f0005 = '' // lot开关加载使能
                  this.ljsxLANLoad = false // 立即生效按钮样式
                  this.ljsxIOTLoad = false // 立即生效按钮样式
                  this.R_00100001 = false
                  this.R_00100002 = false
                  this.R_000f0009 = false
                  this.R_000f0001 = false
                  this.R_000f0002 = false
                  this.initDisable(false, 0)
                  clearTimeout(this.enableTimeOut)
                  return
                }
                console.log('02-网络状态-写入数据', res)
                var listS = []
                res.list.forEach((item, index) => {
                  const id = item.command_id.toLowerCase()
                  // 判断是否时立即生效
                  if (id === '03000001') {
                    if (item.status === '0001' || item.status === '2000') {
                      this.$message.success('立即生效成功')
                    } else {
                      // this.$message.error(listTips(item.status))
                      this.$message.error(listTips(item.remarks))
                    }
                    return
                  }
                  if (item.status === '0001' || item.status === '2000') {
                    // 判断lan使能开关
                    if (id === '00100009') {
                      if (Number(this.ruleForm.R_00100009) === 0) {
                        this.ruleForm.R_00100009 = 1
                      } else {
                        // 通信使能关闭单独操作
                        // listS = []
                        console.log('1111111111')
                      }
                    }
                    // 判断lot使能开关
                    if (id === '000f0005') {
                      if (Number(this.lotForm.R_000f0005) === 0) {
                        this.lotForm.R_000f0005 = 1
                      } else {
                        this.lotForm.R_000f0005 = 0
                      }
                    }
                    //  修改成功提示push到list
                    listS.push({
                      name: enumData[`R_${item.command_id}`],
                      result: '修改成功',
                      status: 0,
                      id: item.command_id,
                    })
                    // 判断通信使能关闭并且LANload为true时 list提示框不显示
                    // if (Number(this.ruleForm.R_00100009) === 1 && this.LANload) {
                    if (Number(this.ruleForm.R_00100009) === 1 && this.stepActive !== 0) {
                      listS = []
                    }
                    // 修改成功项从数组中清除
                    this.ruleFormSelected.forEach((jtem, index) => {
                      if (jtem === `R_${item.command_id}`) {
                        this.ruleFormSelected.splice(index, 1)
                      }
                    })
                    this.lotFormSelected.forEach((jtem, index) => {
                      if (jtem === `R_${item.command_id}`) {
                        this.lotFormSelected.splice(index, 1)
                      }
                    })
                  } else {
                    // 修改失败
                    listS.push({
                      name: enumData[`R_${item.command_id}`],
                      // result: listTips(item.status),
                      result: listTips(item.remarks),
                      status: 1,
                      id: item.command_id,
                    })
                  }
                })
                // 修改数据提示
                if (listS.length > 0) {
                  // console.log(listS)
                  if (Number(this.ruleForm.R_00100009) === 1 && this.stepActive !== 0) {
                    this.LANload = false
                    this.stepActive = 0
                  }
                  this.listStatusTips(listS)
                }
                // 设置为初始状态
                this.icon_00100009 = '' // lan开关加载样式
                this.icon_000f0005 = '' // lot开关加载使能
                this.ljsxLANLoad = false // 立即生效按钮样式
                this.ljsxIOTLoad = false // 立即生效按钮样式
                this.R_00100001 = false
                this.R_00100002 = false
                this.R_000f0009 = false
                this.R_000f0001 = false
                this.R_000f0002 = false
                this.initDisable(false, 0)
                clearTimeout(this.enableTimeOut)
                break
              default:
            }
            clearTimeout(this.timer) // 清除定时器
          }
          break
        default:
      }
    },
    // inputNumber插件内容改变 变为true
    changeIputNum(val) {
      this[val] = true
    },
    initDisable(whether, type) {
      // 1 lot   2 lan
      switch (type) {
        case 0:
          this.LanLoad = whether // LAN配置
          this.LotLoad = whether // loT配置
          break
        case 1:
          this.LotLoad = whether // loT配置
          break
        case 2:
          this.LanLoad = whether // LAN配置
          break
        default:
          break
      }
      this.d_000f0005 = whether // IoT使能 开关
      this.d_00100009 = whether // 通信使能 开关
      this.flag = whether // loT配置/LAN配置-提交
    },
    // 修改提示
    async listStatusTips(list) {
      // console.log(list)
      const params = new URLSearchParams()
      let code = ''
      const paramsList = []
      list.forEach((item, index) => {
        // 0 成功  1 失败
        if (item.status === 0) {
          // arr.push(item.id)
          params.append('ID', localStorage.getItem('ID'))
          params.append('KQJY', 1)
          params.append('KQTBJY', 1)
          switch (item.id) {
            case '00100003': // IP地址
              params.append('IP', this.ruleForm.R_00100003)
              paramsList.push(this.ruleForm.R_00100003)
              break
            case '00100004': // 子网掩码
              params.append('ZWYM', this.ruleForm.R_00100004)
              paramsList.push(this.ruleForm.R_00100004)
              break
            case '00100005': // 网关
              params.append('WG', this.ruleForm.R_00100005)
              paramsList.push(this.ruleForm.R_00100005)
              break
          }
        } else {
          code = ''
        }
      })
      if (paramsList.length > 0) {
        const { data: res } = await this.$http.post(`${ziC}zcgl/updateZiChan`, params)
        if (res.code === '0000') {
          localStorage.setItem('IP', this.ruleForm.R_00100003)
          code = 1
        } else {
          code = 0
        }
      }
      this.listStatus = {
        list: list,
        code: code,
      }
      this.dialogStstusVisible = true
    },
    closeDialog(data) {
      this.dialogStstusVisible = data
    },
    // 子组件触发父组件事件改编 dialogStstusVisible状态
    parentEvent(data) {
      if (this.parentEventTimer) {
        this.parentEventTimer = null
      }
      // this.lotFormSelected = []
      // this.ruleFormSelected = []
      console.log(this.listStatus)
      const list = []
      this.listStatus.list.forEach((item, index) => {
        if (item.status === 0) {
          list.push({
            command_id: item.id,
            value: '',
          })
        }
      })
      console.log(list)
      if (list.length > 0) {
        // 发送数据
        send(this, '01', list)
      }
      this.dialogStstusVisible = data
      if (list.length > 0) {
        this.loading = true
        this.parentEventTimer = setTimeout(() => {
          this.loading = false
        }, intervalTime)
      }
    },
    // LAN提交按钮
    LANSubmit: function () {
      // LAN提交
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return
        }
        if (unique(this.ruleFormSelected).length < 1) {
          this.$message.warning(notChanges)
          return
        }
        clearTimeout(this.LANTimer)
        this.initDisable(true, 2)
        this.writeData(unique(this.ruleFormSelected), this.ruleForm, '0002')
        this.LANTimer = setTimeout(() => {
          if (this.LanLoad) {
            this.initDisable(false, 2)
            if (Number(this.lotForm.R_000f0005) === 1) {
              this.d_00100009 = false
            }
            this.$message.error('提交失败 请稍后重试')
          }
        }, intervalTime)
      })
    },
    // LOT提交按钮
    LOTSubmit: function () {
      // lot提交按钮
      this.$refs.ruleForm2.validate((valid) => {
        if (!valid) {
          return
        }
        if (unique(this.lotFormSelected).length < 1) {
          this.$message.warning(notChanges)
          return
        }
        clearTimeout(this.LOTTimer)
        this.initDisable(true, 1)
        this.writeData(unique(this.lotFormSelected), this.lotForm, '0003')
        this.LOTTimer = setTimeout(() => {
          if (this.LotLoad) {
            // this.LotLoad = false
            this.initDisable(false, 1)
            if (Number(this.lotForm.R_00100009) === 1) {
              this.d_000f0005 = false
            }
            this.$message.error('提交失败 请稍后重试')
          }
        }, intervalTime)
      })
    },
    // 立即生效
    ljsxSubmit(type) {
      clearTimeout(this.ljsxTimer)
      this.initDisable(true)
      this[`ljsx${type}Load`] = true
      const list = [
        {
          command_id: '03000001',
          value: '170',
        },
      ]
      // 发送数据
      send(this, '02', list)
      this.ljsxTimer = setTimeout(() => {
        if (this.LotLoad) {
          this[`ljsx${type}Load`] = false
          this.initDisable(false, 0)
          this.$message.error('操作失败 请稍后重试!')
        }
      }, intervalTime)
    },
    // 通信使能开关
    lanToggle() {
      this.d_000f0005 = true
      // 关闭的的时候需要另外处理提示
      if (Number(this.ruleForm.R_00100009) === 1) {
        this.LANload = true // 提示框展示
        this.stepActive = 1 // 第一步为0
      } else {
        this.stepActive = 0 // 第一步为0
      }
      this.enable('00100009', '000f0005', this.ruleForm, 2)
    },
    // lot使能开关
    lotToggle() {
      this.d_00100009 = true
      this.enable('000f0005', '00100009', this.lotForm, 1)
    },
    // 提交数据 引用函数
    writeData(arr, obj, btnNum) {
      // let num = 0
      const list = []
      // if (this.socket.readyState === 1) {
      // arr 改变过input内容的id存储数组
      // obj 数据存储对象
      for (const i in arr) {
        // num = arr.length
        for (const j in obj) {
          if (arr[i] === j) {
            list.push({
              command_id: arr[i].replace('R_', ''),
              value: obj[j],
            })
          }
        }
      }
      // 发送数据-判断是否需要重新连接
      send(this, '02', list)
    },
    // 使能开关调用事件
    enable(val, val1, enablebtns, type) {
      clearTimeout(this.enableTimeOut)
      // 通信使能开关关闭不执行此操作
      if (!this.LANload) {
        this['icon_' + val] = 'el-icon-loading'
        // this['d_' + val] = true
        this.initDisable(true, type)
      }
      // this.icon_00100009 = '' // lan开关加载样式
      let val2 = ''
      const list = []
      if (enablebtns['R_' + val] === 0) {
        val2 = 1
      } else {
        val2 = 0
      }
      list.push({
        command_id: val,
        value: val2,
      })
      // 发送数据-判断是否需要重新连接
      send(this, '02', list)
      this.enableTimeOut = setTimeout(() => {
        if (this['icon_' + val] !== '') {
          this.$message.error('修改失败 稍后重试')
          this.initDisable(false, type)
          this['icon_' + val] = ''
          this['d_' + val] = false
          this['d_' + val1] = false
        }
      }, intervalTime)
    },
    getFor(obj, list) {
      // 遍历 得到id
      for (const k in obj) {
        list.push({
          command_id: k.replace('R_', ''),
          value: '',
        })
      }
    },
    getStr(str, firstStr, secondStr) {
      if (str === '' || str == null || str === undefined) {
        return ''
      }
      if (str.indexOf(firstStr) < 0) {
        return ''
      }
      var subFirstStr = str.substring(str.indexOf(firstStr) + firstStr.length, str.length)
      var subSecondStr = subFirstStr.replace(/\s*/g, '')
      if (secondStr !== '') {
        subSecondStr = subFirstStr.substring(0, subFirstStr.indexOf(secondStr)).replace(/\s*/g, '')
      }
      return subSecondStr
    },
    isBtnFlag(newVal, btn, flag1, flag2) {
      // 判断按钮样式
      if (newVal === 0) {
        // 0
        if (btn === 0) {
          // 0 0
          this.d_00100009 = false // LAN
          this.d_000f0005 = false // LOT
        } else {
          // 0  1
          this.d_00100009 = flag1
          this.d_000f0005 = flag2
        }
      } else {
        // 1
        if (btn === 1) {
          // 1 1
          this.d_00100009 = false // LAN
          this.d_000f0005 = false // LOT
        } else {
          // 1  0
          this.d_00100009 = flag2
          this.d_000f0005 = flag1
        }
      }
    },
    onerror(e) {
      this.socket.close()
      clearInterval(this.setIntervalWesocketPush)
      console.log('连接失败')
    },
    onclose(e) {
      clearInterval(this.setIntervalWesocketPush)
      console.log('websocket已断开')
      this.loading = false
      this.$message.error('websocket已断开')
    },
  },
  destroyed: function () {
    this.socket.send('CLOSE>-<' + this.username) // 关闭页面前发送
    // 销毁监听
    clearInterval(this.setIntervalWesocketPush)
    this.socket.onclose = this.socket.close()
    this.loading = false
    clearTimeout(this.timer)
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/Network.scss';
</style>
